<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQury.js"></script>
    <script>
        //起始之地：
       $(function(){
        $.post("http://127.0.0.1:5000/list",function(data){
            
            let str =""  
            str +=      "<tr>"  
            str +=     "<td>书本名称</td>"  
            str +=       "<td>书本价格</td>"  
            str +=      "<td>书本描述</td>"  
            str +=      "<td>操作</td>"           
            str +=     " </tr>"  
            for(let i =0 ;i<data.length;i++){  
            str +=      "<tr>"  
            str +=     "<td>"+data[i].name+"</td>"  
            str +=       "<td>"+data[i].price+"</td>"  
            str +=      "<td>"+data[i].summary+"</td>"  
            str +=      "<td> <a href = 'update.html?sid="+data[i].bid+"'> <button>修改</button></a> <button onclick='delete_methods("+data[i].bid +")'>删除</button></td>"  
            str +=     " </tr>"  

           }

           $(".stuTable").html(str)

        })

       })
       //起始之地末端：
       function delete_methods(bid){
        URL_DE ="http://127.0.0.1:5000/delete/"+bid
        $.get(URL_DE,function(data){
            let str =""  
            str +=      "<tr>"  
            str +=     "<td>书本名称</td>"  
            str +=       "<td>书本价格</td>"  
            str +=      "<td>书本描述</td>"  
            str +=      "<td>操作</td>"           
            str +=     " </tr>"  
            for(let i =0 ;i<data.length;i++){  
            str +=      "<tr>"  
            str +=     "<td>"+data[i].name+"</td>"  
            str +=       "<td>"+data[i].price+"</td>"  
            str +=      "<td>"+data[i].summary+"</td>"  
            str +=      "<td> <a href = 'update.html?sid="+data[i].bid+"'> <button>修改</button></a>  <button onclick='delete_methods("+data[i].bid +")'>删除</button></td>"  
            str +=     " </tr>"  

           }

           $(".stuTable").html(str)

       })
    }
    function search_methods(){
        var search_value = $("#myInput").val()
        if (search_value =="请输入书名或描述"){
            alert("请输入搜索内容")
        }
        else{
            URL_SE ="http://127.0.0.1:5000/search/"+search_value
        $.get(URL_SE,function(data){
            let str ="搜索结果："  
            str +=      "<tr>"  
            str +=     "<td>书本名称</td>"  
            str +=       "<td>书本价格</td>"  
            str +=      "<td>书本描述</td>"  
            str +=      "<td>操作</td>"           
            str +=     " </tr>"  
            
            for(let i =0 ;i<data.length;i++){  
            str +=      "<tr>"  
            str +=     "<td>"+data[i].name+"</td>"  
            str +=       "<td>"+data[i].price+"</td>"  
            str +=      "<td>"+data[i].summary+"</td>"  
            str +=      "<td> <a href = 'update.html?sid="+data[i].bid+"'> <button>修改</button></a>  <button onclick='delete_methods("+data[i].bid +")'>删除</button></td>"  
            str +=     " </tr>"  

           }


           $(".searchTable").html(str)
           $(".result").text("搜寻结果：")
        })



        }
       

    }
    function reflash_methods(){
        location.reload();

    }


    </script>
    <style>
        body{
            background-color: gray;
        }
        .stuTable{
            border: 3px black solid;
            border-collapse: collapse; /* 合并相邻边框 */  


        }
        .search_result{
            border: red 10px double;
            display: flex;
            justify-content: center;

        }
        .stuTable td  {
            text-align: center;
            line-height: normal;
            border: 3px black solid;
            border-collapse: collapse; /* 合并相邻边框 */  
            padding: 0px;
            margin: 0px;
            height: 100px;
            width: 200px;
            background-color: rgb(209, 204, 204);
        }
        .searchTable td  {
            text-align: center;
            line-height: normal;
            border: 3px black solid;
            border-collapse: collapse; /* 合并相邻边框 */  
            padding: 0px;
            margin: 0px;
            height: 100px;
            width: 200px;
            background-color: rgb(209, 204, 204);
        }
        .tableBox{

            display: flex;
            justify-content: center;
        }
        .Topbar{
            text-align: center;
            line-height: 300px;
            height: 300px;
            width: 1000px;
        }
        .Topbar button{
            height: 100px;
            width: 200px;
            line-height: 100px;
            text-align: center;
        }
        .searchBox{
            height: 100px;
            width: 170px;
            line-height: 100px;
            text-align: center;
        }
    
        .Topbar input{
            height: 94px;
            width: 200px;
            line-height: 100px;
            text-align: center;
        }
        .stuTable td button{
            width: 50px;
            height: 50px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="Topbar">
     <a href="file:///F:/typora-root/Typora/%E5%8D%9A%E5%AE%A2%E7%AC%94%E8%AE%B0/vue-qianduan/add.html"><button>添加书本</button></a>

     
     <input type="text" id="myInput" value="" placeholder="请输入书名或描述" onfocus="if(this.value=='请输入书名或描述') this.value='';" onblur="if(this.value=='') this.value='请输入书名或描述';"><button onclick="search_methods()">搜索</button><button onclick="reflash_methods()">重置搜索</button></div>
      <div class="search_result">
        <p class="result"></p>
        <table class="searchTable"></table>
      </div>      
     
</div>
    <div class="tableBox">
    <table class="stuTable"></table>
    </div>
    
</body>
</html>